<template>
    <div class="main right-in">

        <el-row>
            <el-col :span="24" class="title_area">
                <h4>终端设备管理</h4>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>终端设备列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <!--搜索栏-->
        <div class="search_panel">
            <el-row>
                <el-col :span="6">
                    <el-button type="primary"  class="btn_login" @click="addMachine">添加终端设备</el-button>
                </el-col>
            </el-row>
        </div>
        <!--列表-->
        <el-table :data="tableData"  border style="width: 100%;margin-top: 20px">
            <el-table-column prop="machine_code" label="终端号"></el-table-column>
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="voice_content" label="语音内容"></el-table-column>
            <el-table-column  label="操作" width="200">
                <template scope="scope">
                    <el-button type="danger" size="small" @click="editMachine(scope.$index,tableData)">修改</el-button>
                    <el-button type="danger" size="small" @click="deleteMachine(scope.$index,tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
  import url from '~/conf/settings'
  import { mapState } from 'vuex'

  export default {
    data() {
      return {//order_returns
        order: {},
        total_amount: '',
        tableData:[],
        pagination: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        tableData2:[],
        pagination2: {
          total: 20,
          count: 20,
          current_page: 1,
          total_pages: 1
        },
        num: 1,//默认退一个
        reason: '',
        return_id : '',
        serve_id: '',
        max: 1,
        min: 1,
        num1: 1,
        min1: 1,
        max1: 1
      }
    },
    created(){
      this.machineList()
    },

    watch: {
      dialogVisible1: function (newValue, oldValue) {
        if(!newValue) {
          this.num1 = 1
        }
      },
      dialogVisible: function (newValue, oldValue) {
        if(!newValue) {
          this.num = 1
          this.reason = ''
        }
      }
    },

    methods: {

      deleteMachine(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }

        this.$confirm('此操作将删除此打印机，是否继续','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteMachine', params).then(ret => {
            if(ret.success) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.machineList()
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      editMachine(index, table) {
        var id = table[index].id
        this.$router.push({name: 'editMachine', params: {id: id}})
      },

      machineList() {
        this.$store.dispatch('machineList').then((ret)=>{
          this.tableData = ret.machines
        })
      },

      serveOrderProduct(index, table) {
        var id = table[index].id
        this.serve_id = id
        this.max1 = table[index].num - table[index].serve_num
        this.dialogVisible1 = true
        return
      },

      confirmReturningVegetables() {

        let params = {
          return_num: this.num,
          reason: this.reason,
          id: this.return_id,
        }

        this.$store.dispatch('returningVegetables', params).then((ret) => {
          if(ret.success) {
            this.$notify({
              title: '成功',
              message: '退菜成功',
              type: 'success'
            });
            this.dialogVisible = false
            this.orderDetail()
          }else{
            this.$notify({
              title: '失败',
              message: '修改状态失败',
              type: 'error'
            });
          }
        })
      },

      addMachine() {
        let id = this.$route.params.id
        this.$router.push({name: 'addMachine'})
      },

      deleteMachine(index, table) {
        var id = table[index].id
        let params = {
          id: id
        }

        this.$confirm('此操作将删除此终端吗，是否继续','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteMachine', params).then(ret => {
            if(ret.success) {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
              });
              this.machineList()
            }else{
              this.$notify({
                title: '失败',
                message: '删除失败',
                type: 'error'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      returningVegetables(index, table) {
        var id = table[index].id
        this.return_id = id
        this.max = table[index].num
        this.dialogVisible = true
        return
      }
    },
  }
</script>

<style scoped>
    .inputs .el-row{ font-size: 14px; }
    .actions {
        text-align: right;
        padding-bottom: 14px;
    }
    /*.middle_panel .inputs .el-row{ margin: 12px 0; }*/
    .middle_panel .inputs .el-row .el-input{ margin:  0 0 12px 0; }
    .middle_panel .inputs .el-row .dbtn{ height:36px!important; line-height: 36px!important; padding:0 24px!important;  font-size: 14px; }
    .middle_panel .inputs{ min-height: 250px; }
</style>
<style>
    .inputs .el-badge .el-badge__content.is-fixed{top:10px!important;}
    .middle_panel .inputs .el-row .el-button--primary span{ color:#fff!important; }
    .fenpei .el-row{margin:12px 0;}
    .select_down{margin-top:12px;}
</style>
